<template>
	<view class="contianer">
		<top-bar>
			<template #left>
				<image src="../../static/images/login/back.png" @tap="back" style="width: 44rpx;height: 44rpx;"></image>
			</template>
			<template #center>
				<text style="font-size: 40rpx;">申请列表</text>
			</template>
			<template #right>
				<view class="">
				</view>
			</template>
		</top-bar>
		<!-- 显示添加卡片 -->
		<view class="main">
			<view style="font-size: 20px;
					text-align: center;
					line-height: 100px;" v-if="req_list.length==0">暂无好友申请</view>
			<view class="friend-car" v-for="item in req_list" :key="item.id">
				<view class="top">
					<view class="top-btn-left" @tap="refuse(item.id)">
						拒绝
					</view>
					<view class="top-center" @tap="toGarllery(item.id)">
						<image :src="item.imgurl" mode=""></image>

					</view>
					<view class="top-btn-right" @tap="agree(item.id)">
						同意
					</view>
				</view>
				<view class="detail">
					<view class="name">
						{{item.name}}
					</view>
					<view class="time">
						{{item.lastTime}}
					</view>
				</view>
				<view class="bottom">
					<view class="msg">
						{{item.req_msg}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../commons/js/util.js'
	import {
		RuntimeServerUrl
	} from "../../commons/getRuntimeEnv.js"
	export default {
		data() {
			return {
				userid: '',
				req_list: [],
			}
		},
		onLoad(option) {
			// console.log(option);
			//更具登入用户，查询展示用户申请列表，
			if (option.id) {
				// debugger
				this.userid = option.id
			} else {
				this.userid = uni.getStorageSync('userid')
			}
			// console.log(this.userid,'friend');
			// this.obtainUserDetali(option)
			//根据id使用获取好友列表 state=2申请状态中 可以得到申请中的用户
			//通过这个用户id使用获取最后一条聊天信息 可以得到请求列表所需要的数据

		},
		onShow() {
			// console.log(this.userid,'friend');
			this.obtainUserDetali()
		},
		computed: {

		},
		methods: {

			//返回上一层
			tab_cancel() {
				uni.navigateTo({
					url: "../index/index"
				})
			},
			//通过用户id获取用户数据
			obtainUserDetali() {
				//获取到用户id搜索到对应数据，赋值给this.userDetali
				// console.log('获取用户id',this.userid);
				util.request({
					url: '/index/getUserList',
					method: "POST",
					data: {
						uid: this.userid,
						state: 2
					}
				}).then(res => {
					//得到用户申请个数，通过个数再次请求最后一条聊天数据
					// console.log(res.data.result,'请求好友数量');
					if (res.data.result.length) {
						// console.log(res.data.result.length);
						return Promise.resolve(res.data.result)
					} else {
						return Promise.resolve([])
					}
				}).then(res => {
					// 获取最后一条信息
					res.forEach(item => {
						util.request({
							url: '/index/getlastmessage_u',
							method: "POST",
							data: {
								uid: this.userid,
								fid: item.id
							}
						}).then(val => {
							// console.log(val.data.result.message,'最后一条聊天数据');
							//渲染数据格式的拼接RuntimeServerUrlrl = `${RuntimeServerUrl}${item.imgurl}`
							item.imgurl = `${RuntimeServerUrl}${item.imgurl}`,
								item.id = item.id,
								item.lastTime = util.formatDate(new Date(item.lastTime))
							item.req_msg = val.data.result.message
							console.log(item);
							// this.req_list.push(item)
							// console.log(item);
						})
					})
					//数据处理完 赋值
					this.req_list = res
					// console.log(...res,'加上请求消息的res');
					// console.log(this.req_list,'加上请求消息的this.req_list');
				})


			},
			//点击同意好友申请
			agree(uid) {
				util.request({
						url: '/friend/updatafriendstate',
						method: "POST",
						data: {
							uid: this.userid,
							fid: uid
						}
					})
					.then(res => {
						// console.log('同意添加成功');
						if (res.data.status == 200) {
							//更新
							uni.showToast({
								title: "添加成功",
								duration: 800,
							})
							setTimeout(() => {
								this.obtainUserDetali()
							}, 500)
						}
					})
				// .finally(()=>{
				// 	// console.log('返回一个promise，没有参数，每次请求后都会执行');
				// })

				// console.log(uid);

			},
			refuse(uid) {
				util.request({
					url: '/friend/deletefriend',
					method: "POST",
					data: {
						uid: this.userid,
						fid: uid
					}
				}).then(res => {
					// console.log(res,'拒绝删除成功');
					if (res.data.status == 200) {
						//更新
						uni.showToast({
							title: "已拒绝",
							duration: 800,
						})
						setTimeout(() => {
							this.obtainUserDetali()
						}, 500)
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			//点击申请人的头像，跳转到用户展示页面,需要将用户的id传递过去
			toGarllery(id) {
				// console.log(id);
				uni.navigateTo({
					url: `/pages/userGarllery/userGarllery?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.contianer {
		height: 1330rpx;
	}



	.main {
		width: 100%;
		// height: 1230rpx;
		// background-color: red;
		// margin-bottom: 100rpx;
		// overflow: hidden;
		padding-top: 88upx;
		//如果是app端使用 设置
		/* #ifdef APP-PLUS */
		padding-top: calc(var(--status-bar-height)*2);
		/* #endif */
		padding-bottom: 100rpx;

		.friend-car {
			margin: 80rpx auto;
			width: 90%;
			height: 300rpx;
			border-radius: 20rpx;
			background-color: #fff;
			position: relative;
			box-shadow: 0px 7px 11px #d2d2d2;

			.top {
				height: 30%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 28rpx;

				.top-btn-left {
					width: 140rpx;
					text-align: center;
					border-radius: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: red;
					background-color: #ffeded;
				}

				.top-btn-right {
					width: 140rpx;
					text-align: center;
					border-radius: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: black;
					background-color: #fee22b;
				}

				.top-center {
					width: 30%;
					text-align: center;

					image {
						position: absolute;
						left: 50%;
						transform: translate(-50%, -70%);
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 2px solid #fff;
						background-color: green;

					}

				}
			}

			.detail {
				text-align: center;

				.name {
					font-size: 32rpx;
					font-weight: 600;
				}

				.time {
					font-size: 24rpx;
					color: gray;
				}
			}

			.bottom {
				margin: 20rpx;
				box-sizing: border-box;
				padding: 16rpx;
				border-radius: 10rpx;
				height: 35%;
				background-color: #f0f4f5;
				font-size: 30rpx;
				overflow: scroll;
			}
		}
	}
</style>